<template>
  <el-select
    v-model="selectValue"
    :multiple="multiple"
    :value="value"
    :disabled="disabled"
    :clearable="clearable"
    :filterable="filterable"
    :placeholder="placeholder"
    :options="options"
    style="width: 100%"
  >
    <el-option
      v-for="item in optionLists"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script>
import request from '@/utils/request'

export default {
  name: 'ComSelect',
  props: {
    value: { type: [Number, String, Array], default: null },
    // value: { type: Array, default: null },
    options: { type: Array, default: null }, // option选项列表JSON串，如此项有值，则直接用此选项中的数据，不会进行数据请求去获取数据。即优先级options>url。默认为空，非必传。
    url: { // 请求下拉框URL地址。
      type: String,
      default: ''
    },
    multiple: { // 是否多选，默认false，非必传。
      type: Boolean,
      default: false
    },
    disabled: { // 是否禁用，默认false，非必传。
      type: Boolean,
      default: false
    },
    clearable: { // 是否可清空选项，默认true，非必传。
      type: Boolean,
      default: true
    },
    filterable: { // 是否可搜索， 默认false，非必传。
      type: Boolean,
      default: false
    },
    placeholder: { // 选择框提示文字，默认‘请选择’，非必传。
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selectValue: this.value,
      optionLists: []
    }
  },
  watch: {
    options() {
      if (this.options) {
        this.optionLists = this.options
      }
    },
    url() {
      this.getOptions()
    },
    value() {
      console.log('选中了' + this.value())
      this.selectValue = this.value
    }
  },
  created() {
    if (this.options) { // 如果父组件有下拉选项数据，则不进行数据请求
      this.optionLists = this.options
    } else {
      this.getOptions()
    }
  },
  methods: {
    getOptions() {
      console.log('加载下拉框')
      return request({
        url: this.url,
        method: 'get',
        data: {}
      }).then(res => {
        this.optionLists = res.data
      })
    }
  }
}
</script>
